<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="content-type" content="text/html; charset=utf-8;"/>
		<title></title>
	</head>
	<style type="text/css">
		html,body{
			width: 1920px;
			background-image: url(__WK__/image/bg.png);
			background-repeat: no-repeat;
			background-size:100% 100%;
			height: auto;
			min-height: 100%;
			/*height: 100%;*/
			padding: 0;
			margin: 0;
			font-family: "微软雅黑";
			position:relative;
		}
		body{
			width: 1920px;
			height: 1080px;
			background:url(__WK__/image/bg.png) no-repeat ;
			background-size:cover; 
			min-width: 1920px;
		}
		.top{
			width: 100%;
			height: 80px;
			padding-top: 5px;
		}
		.logo{
			width: 270px;
			height: 80px;
			
			float: left;
		}
		.logo_img{
			padding-left: 30px;
			width: 80px;
			height: 100%;
			float: left;
		}
		.logo_right{
			width: 1380px;
			height: 100%;
			float: left;
		}
		.nav{
			width: 868px;
			height: 100%;
			padding: 15px 0;
			margin: auto;
			font-size: 30px;
			color: white;
			font-weight: bold;
		}
		.nav_inner{
			width:184px;
			height: 50px;
			margin-right: 44px;
			line-height: 50px;
			float: left;
			font-size: 24px;
			text-align: center;
		}
		.nav_inner:nth-child(1){
			background: url(__WK__/image/yuanjiao.png) no-repeat center center;
			    /* background-image: url(../image/btn.png); */
		    background: -moz-linear-gradient(bottom left, #ff800b,#ffbe28);
		    background: -webkit-linear-gradient(bottom left, #ff800b,#ffbe28);
		    background: -o-linear-gradient(bottom left, #ff800b,#ffbe28);
		    background-size: 100% 100%;
		    -moz-box-shadow: 6px 3px 10px 2px rgba(0,0,0,0.2);
		    -webkit-box-shadow: 6px 3px 10px 2px rgba(0,0,0,0.2);
		    box-shadow: 6px 3px 10px 2px rgba(0,0,0,0.2);
		    border-radius: 26px;
		}
		.nav_inner:nth-child(4){
			margin-right: 0;
		}
		.nav_right{
			width: 270px;
			height: 100%;
			float: right;
			/*background-color: red;*/	
			font-size: 24px;
			color: white;
			font-weight: bold;
		}
		.login{
			float: left;
			width: 42px;
			font-size: 20px;
			color: white;
			font-weight: bold;
			margin-top: 28px ;
		}
		.regsin{
			float: left;
			width: 142px;
			height: 50px;
			color: #ebdec8;
			margin: 15px 44px 40px 40px;
			background-color: white;
			text-align: center;
			line-height: 50px;
			border-radius:25px;
		}
		/*login头*/
		.content{
			width: 1232px;
			height: 696px;
			margin: auto;
			margin-top: 120px;
			background:url(__WK__/image/bg.png) no-repeat ;
			background-position:100% 100%; 
			 -moz-box-shadow: 6px 3px 10px 2px rgba(0,0,0,0.2);
		    -webkit-box-shadow: 6px 3px 10px 2px rgba(0,0,0,0.2);
		    box-shadow: 5px 3px 10px 6px rgba(0,0,0,0.2);   
		}
		.content_inner{
			width: 295px;
			height: 544px;
			padding-top: 82px;
			margin-left: 230px;
			/*background-color: red;*/	
		}
		.content_logo{
			width: 100%;
			height: 100px;
		}
		.words{
			width: 100%;
			height: 135px;
			line-height: 135px;
			text-align: left;
			font-size: 30px;
			color: #999999;
			font-weight: bold;
		}
		.phone{
			width: 100%;
			height: 52px;
			border-radius: 26px;
			border: 1px solid #999999;
			margin-bottom: 20px;
		}
		.phone img{
			width: 16px;
			height: 16px;
			margin-top: 16px;
			margin-left: 20px;
			margin-right: 20px;
		}
		.phone input{
			width: 200px;
			height: 91%;
			outline:none;
			border: none;
		}
		 input{ /* WebKit browsers */ 
		    font: 18px Arial;
		    color: #999999;
		} 
		.passwords{
			width: 100%;
			height: 52px;
			border-radius: 26px;
			border: 1px solid #999999;
			margin-bottom: 90px;
		}
		.passwords img{
			width: 16px;
			height: 16px;
			margin-top: 16px;
			margin-left: 20px;
			margin-right: 20px;
		}
		.passwords input{
			width: 200px;
			height: 91%;
			outline:none;
			border: none;
		}
		.btn_login{
			width: 100%;
			height: 52px;
			border-radius: 26px;
			margin-bottom: 90px;
			/*background: url(image/Btn_评价提交.png) no-repeat ;*/
			/*background-color: #FF800B;*/
			background-size:100% 100%;
			text-align: center;
			font-size: 15px;
			color: white;
			font-weight: bold;
			line-height: 52px;
			margin-bottom: 20px;
			background: -moz-linear-gradient(left, #ffe329 0%, #ffba00 100%);
		    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffe329), color-stop(100%,#ffba00));
		    background: -webkit-linear-gradient(left, #ffe329 0%,#ffba00 100%);
		    background: -o-linear-gradient(left, #ffe329 0%,#ffba00 100%);
		    background: -ms-linear-gradient(left, #ffe329 0%,#ffba00 100%);
		    background: linear-gradient(to right, #ffe329 0%,#ffba00 100%);
		}
		.tishi{
			width: 100%;
			height: auto;
			font-size: 16px;
			color: #999999;
		}
		input:-webkit-autofill{-webkit-box-shadow:0 0 0px 1000px white inset;}
	</style>
	<body>
		<div class="top">
				<div class="logo">
					<img class="logo_img" src="__WK__/image/logo.png" alt="" />
				</div>
				<div class="logo_right">
					<div class="nav">
						<div class="nav_inner" style="">首页</div>
						<div class="nav_inner">口语预约</div>
						<div class="nav_inner">写作预约</div>
						<div class="nav_inner"><a href="{:url('Center/userCenter')}" style="color:white;text-decoration:none;" >个人中心</a></div>
					</div>
				</div>
				<div class="nav_right">
					<div id="" class="regsin">
						登陆
					</div>
					<div id="" class="login">
						注册
					</div>
				</div>
		</div>
		<div class="content">
			<div class="content_inner">
				<form id="updateForm">
					<div class="content_logo">
					<img class="logo_img"style="height: 76px;padding-left: 0;" src="__WK__/image/logo.png" alt="" />
				</div>
					<div class="words">
						学生登录
					</div>
					<div class="phone" id="mobile">
						<img src="__WK__/image/icon_上一月.png" alt="" />
						<input type="text" name="phone" id="phone" value="" maxlength="11" placeholder="请输入手机号"  onkeyup="value=value.replace(/[^\d]/g,'')" />
					</div>
					<div class="passwords" id="passw">
						<img src="__WK__/image/icon_上一月.png" alt="" />
						<input type="password" name="pwd" id="pwd" value="" placeholder="请输入密码"/>
					</div>
					<div class="btn_login" id="but"  style="cursor:pointer;">
						登录
					</div>
					<div class="tishi">
						没有账号，<a style="color: #ffba00;text-decoration:none;" href="{:url('resign/register')}">立即注册！</a>
					</div>
				</form>
			</div>
		</div>
		<script src="__STATIC__/plugins/jquery/jquery.min.js"></script>
		<script src="__STATIC__/js/layer/layer.js"></script>
		<script>
            $(function(){
                $("#phone").focus();
            })
            $("#phone").change(function(){
                $('#mobile').css('border-color','#999999')
            })
            $("#pwd").change(function(){
                $('#passw').css('border-color','#999999')
            })

            $("#but").click(function(){
                var phone = $("input[name=phone]").val();
                var pattern = /^1[34578]\d{9}$/;
                // console.log();
                if($("#phone").val()=="" || pattern.test(phone) == false){
                    $('#mobile').css('border-color','#FF5722');
                    $("#phone").focus();
                    return;
                }else if($("#pwd").val()==""){
                    $('#passw').css('border-color','#FF5722');
                    $("#pwd").focus();
                    return;
                }else{
                    var formData = $("#updateForm").serialize();
                    $.ajax({
                        type:'post',
                        url:"{:url('Login/userLogin')}",
                        data:formData,
                        dataType:"json",
                        success:function(res){
                            if(res.status == 0){
                                layer.msg(res.msg,{icon:5,time:2000});
                            }else{
                                layer.msg(res.msg,{icon:6,time:2000});
                                // window.location.href = "{:url('Index/index')}";
                            }
                        }
                    });
                }
            })
		</script>
	</body>
</html>
